<template>
  <div class="TaskManagementBox">
    <BigImg
      :visible="photoVisible"
      :url="bigImgUrl"
      @closeClick="
        () => {
          photoVisible = false;
        }
      "
    ></BigImg>
    <!-- 左侧 -->
    <a-row style="width: 100%; height: 100%">
      <a-col :md="4" style="background: #fff; padding: 10px; height: 100%">
        <div class="task_left_box">
          <div class="TaskManagement_left_top_name" style="margin-bottom: 10px">
            <div class="icon_box">
              <i class="iconfont icon-yueyongdianliangbili"></i>
            </div>

            <div class="name">核算汇总</div>
          </div>

          <a-form @keyup.enter.native="searchQuery">
            <a-form-item>
              <a-input-search
                placeholder="搜索任务"
                v-model="queryParam.taskName"
                @search="searchQuery"
              />
            </a-form-item>
          </a-form>
          <div class="TaskManagement_left_table">
            <a-table
              style="cursor: pointer"
              class="table_overflow scrollbar"
              ref="table"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              @change="handleTableChange"
              :customRow="customRowFn"
            >
              <span slot="status" slot-scope="text, record">
                <div v-if="record.taskStatus == 1">
                  <a-badge color="#a7a8ad" />{{ record.taskStatus_dictText }}
                </div>
                <div v-else-if="record.taskStatus == 2">
                  <a-badge color="#f5a623" />{{ record.taskStatus_dictText }}
                </div>
                <div v-else-if="record.taskStatus == 3">
                  <a-badge color="#4bc076" />{{ record.taskStatus_dictText }}
                </div>
              </span>

              <span slot="action" slot-scope="text, record">
                <a-divider v-show="record.taskStatus == 1" type="vertical" />
                <a @click.stop="viewTask(record, 3)">查看</a>
              </span>
            </a-table>
            <!-- </div> -->
          </div>
        </div>
      </a-col>
      <!-- 右侧 -->
      <a-col :md="20" style="height: 100%">
        <div class="TaskManagement_right">
          <div class="TaskManagement_right_box">
            <div v-if="panes.length == 0" class="view">请点击任务查看</div>

            <a-tabs
              v-else
              v-model="activeKey"
              hide-add
              type="editable-card"
              @edit="onEdit"
              style="overflow-y: auto"
            >
              <a-tab-pane
                v-for="pane in panes"
                :key="pane.key"
                :tab="pane.title"
                :closable="pane.closable"
              >
                <Enterprise :paneData="pane.content"></Enterprise>
                <Emission :paneData="pane.content"></Emission>
                <AnalysisChart :paneData="pane.content"></AnalysisChart>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
 
<script>
import BigImg from "@/components/Tools/BigImg.vue";
import {
  taskList,
  queryTaskBoundaryList,
  updateTaskStatus,
  queryView,
  querySummaryView,
} from "@/api/api";
import { ListMixin } from "@/mixins/ListMixin";
import { WebsocketMixin } from "@/mixins/WebsocketMixin.js";
import TaskPage from "@/views/Accounting/TaskPage.vue";
import taskPanel from "@/views/Accounting/Task/taskPanel.vue";
import Enterprise from "@/views/Accounting/Collect/Enterprise.vue";
import Emission from "@/views/Accounting/Collect/Emission.vue";
import AnalysisChart from "@/views/Accounting/Collect/AnalysisChart.vue";
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  mixins: [ListMixin, WebsocketMixin],
  data() {
    return {
      websock: null,
      activeInx: 0,
      activeKey: null,
      panes: [],
      taskInfo: null,
      taskId: "",
      url: {
        list: "/accounting/summary/list",
        delete: "/accounting/summary/delete",
      },
      columns: [
        {
          title: "核算任务",
          align: "left",
          dataIndex: "taskName",
        },
      ],

      photoVisible: false,
      bigImgUrl: "",

      taskList: [],
    };
  },
  components: {
    Enterprise,
    Emission,
    AnalysisChart,
    BigImg,
    taskPanel,
    TaskPage,
  },
  computed: {
    leftColMd() {
      return this.panes.length == 0 ? 24 : 6;
    },
    rightColMd() {
      return this.panes.length == 0 ? 0 : 18;
    },
    percentage() {
      var total = 0;
      var finishNum = 0;
      this.mockData.forEach((item) => {
        //   console.log(item);
        item.source.forEach((scoped) => {
          scoped.facility.forEach((facility) => {
            if (facility.state == 1) {
              finishNum++;
            }
            total++;
          });
        });
      });
      //   console.log();
      return ((finishNum / total) * 100).toFixed(2);
    },
    facilityComputed() {
      return function (item) {
        var total = 0;
        var finishNum = 0;
        item.facility.forEach((facility) => {
          if (facility.state == 1) {
            finishNum++;
          }
          total++;
        });
        return `${finishNum}/${total}`;
      };
    },
    headerComputed() {
      return function (item) {
        var total = 0;
        var finishNum = 0;
        item.source.forEach((scoped) => {
          scoped.facility.forEach((facility) => {
            if (facility.state == 1) {
              finishNum++;
            }
            total++;
          });
        });
        return ` ${finishNum}/${total}`;
      };
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    customRowFn(record) {
      return {
        on: {
          click: () => {
            this.viewTask(record, 3);
          },
        },
      };
    },
    handleTask(taskObj, val) {
      var param = {
        id: taskObj.id,
        taskStatus: val,
      };
      updateTaskStatus(param).then((res) => {
        // //   console.log(res);
        this.loadData();
      });
    },
    updateTaskList() {
      this.panes = this.panes.filter((item) => {
        if (item.type != 2) return item;
      });
      this.loadData();
    },
    callback(key) {
      //   console.log(key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    addPane(taskInfo) {
      const panes = this.panes;
      const activeKey = `newTab${taskInfo.taskInfo.id}`;
      panes.push({
        title: `${taskInfo.taskInfo.taskName}`,
        content: taskInfo,
        key: activeKey,
        type: 1,
      });
      this.panes = panes;
      this.activeKey = activeKey;
    },
    remove(targetKey) {
      let activeKey = this.activeKey;
      let lastIndex;
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.panes.filter((pane) => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        } else {
          activeKey = panes[0].key;
        }
      }
      this.panes = panes;
      this.activeKey = activeKey;
    },
    /**
     * 点击表格行触发
     * @param {Object} record - 行数据
     * @param {Number} index - 索引值
     * @return Function
     */
    viewTask(record) {
      this.taskId = record.id;
      let param = {
        taskId: this.taskId,
        pageNum: 1,
        pageSize: 10,
      };

      querySummaryView(param).then((res) => {
        this.taskInfo = res.result;
        var flag = true;
        if (this.panes.length > 0) {
          for (var i = 0; i < this.panes.length; i++) {
            if (`newTab${this.taskInfo.taskInfo.id}` == this.panes[i].key) {
              flag = false;
            }
          }
          if (flag) {
            this.addPane(this.taskInfo);
          } else {
            this.activeKey = `newTab${this.taskInfo.taskInfo.id}`;
          }
        } else {
          this.addPane(this.taskInfo);
        }
      });
    },
    rowClick(record, index) {
      return {
        on: {
          click: () => {
            this.taskId = record.id;
            let param = {
              taskId: this.taskId,
            };

            queryTaskBoundaryList(param).then((res) => {
              this.taskInfo = res.result;
              var flag = true;
              if (this.panes.length > 0) {
                for (var i = 0; i < this.panes.length; i++) {
                  if (`newTab${this.taskInfo.id}` == this.panes[i].key) {
                    flag = false;
                  }
                }
                if (flag) {
                  this.addPane(this.taskInfo);
                } else {
                  this.activeKey = `newTab${this.taskInfo.id}`;
                }
              } else {
                this.addPane(this.taskInfo);
              }
            });
          },
        },
      };
    },

    addTask() {
      const panes = this.panes;
      const activeKey = `newTesk${this.activeInx}`;
      panes.push({
        title: `新建任务`,
        content: "",
        key: activeKey,
        type: 2,
      });
      this.activeInx++;
      this.panes = panes;
      this.activeKey = activeKey;
    },

    onSearch() {},
  },
};
</script>

<style lang="scss" scoped >
@import "@/assets/css/taskManagementCopy.scss";
@import "@/assets/css/scrollbar.scss";
.ant-tabs-editable-card {
  display: flex;
  flex-direction: column;
}
.ant-tabs-content {
  // overflow: hidden;
  // overflow-x: hidden;
  // overflow-y: auto;
}
.view {
  font-size: 22px;
  color: #3dbaf9;
  margin: 50px auto 0;
}
</style>


